<template>
   <div class="headerNav">
   <div class="headerNav-wrap wrap">
           <router-link class="logo" to="/">
                <img :src="require('../../static/images/logo.png')">
            </router-link>
            <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo " mode="horizontal" @select="handleSelect">
                 <el-menu-item index="1">
                    <a href="/" >首頁</a>
                 </el-menu-item>
                 <el-menu-item index="2">
                    <a href="/allHouses" >所有屋苑成交及詳細資料</a>
                 </el-menu-item>
                 <el-menu-item index="3">
                    <a href="/trendChart" >澳門經濟數據</a>
                 </el-menu-item>
                  <el-menu-item index="4">
                    <a href="/allSpace" >現時市場上最新放盤&lt租/售&gt</a>
                 </el-menu-item>
                 <el-menu-item index="5">
                    <a href="/interiorDesign" >室內設計</a>
                 </el-menu-item>
                 <el-menu-item index="6">
                    <a href="/loanTransaction" >貸款業務</a>
                 </el-menu-item>
                 <el-menu-item index="7">
                    <a href="/guide" >新手置業指南&lt推薦&gt</a>
                 </el-menu-item>
                 <el-menu-item index="8">
                    <a href="/aboutUs" >關於我們</a>
                 </el-menu-item>
            </el-menu>
        </div>
         


        
   </div>
</template>

<script>
import $ from '../../static/js/jquery.min'
export default {
    props:{
        activeIndex:String,
    },
    data(){
        return{
             // activeIndex: 0,
       }        
    },
    mounted(){
       
    },
    updated(){
       
    },
    methods:{
         handleSelect(key, keyPath) {
            // console.log(key, keyPath);
          }
    }
}
</script>

<style lang="scss">
    @import "../style/base/_base";

    .headerNav{
        @include vertical-centering;
        height:86px;
        box-shadow: 0px 5px 9px rgba(0,64,128,0.1);
        .loanTransaction{
            color:red;
        }
        .headerNav-wrap{
            @include flex;
            justify-content:space-between;
            .logo{
                width: 120px;
                height:64px;
                img{
                   width: 120px;
                   height:64px;
                }
            }
            .trendChart{
                color:red;
                .is-active{
                      color:red;
                }
            }
            .nav{
                @include vertical-centering;
                position: relative;
                li{
                    padding-left: 40px;
                    a{
                        display: block;
                        font-size: 16px;
                        color: #004080;
                    }
                }
                .current{
                    a{
                        color: #ff6840;
                    }
                }
                .block {
                    width: 48px;
                    height: 2px;
                    background: #ff6840;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    z-index: 99;
                }
            }
            .el-menu-demo{
                li:hover{
                    background:#fff;
                }
                li:last-child{
                    padding:0;
                }
                .el-menu-item.is-active{
                    a{
                        color:#ff6840;
                    }
                     border-bottom-color: #ff6840;
                }
                .el-menu-item{
                    border-bottom-width: 2.5px;
                    padding: 0 10px;
                }
                .el-menu-item:hover{

                    border-bottom-color: #ff6840;
                }
               // .el-menu-item:hover{background-color:#ff6840}
                li{   
                    a{
                        display: block;
                        font-size: 16px;
                        color: #004080;
                    }
                }
                
            }

            .el-menu--dark{
                background:#fff;
            }
        }
    }
</style>